<template>
    <div class="common-size losses_medicine_device">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="page-content">
            <div class="page-chart page-chart5">
                <div ref="medicineChartDom" class="chart-box">

                </div>
                <div class="y-name">设备数量(台)</div>
            </div>
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in medicineChartData.textData">
                </div>
            </div>
            <div class="medicine-title">
                盘亏非医疗设备分析
            </div>
            <div class="page-chart page-chart5">
                <div ref="noMedicineChartDom" class="chart-box">

                </div>
                <div class="y-name">设备数量(台)</div>
            </div>
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in noMedicineChartData.textData">
                </div>
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  let echarts = require('echarts')
  import {nuxtMixins} from '../assets/javascript/mixin'
  import echartsConfig from '@/assets/javascript/echartsConfig'
  export default {
    name: 'losses_medicine_device',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        pageTitle: '盘亏分析',
        detailTitle: '盘亏医疗设备分析'
      }
    },
    computed:{
      medicineChartData () {
        return (this.chartData.chartData || {}).medicineChart || {}
      },
      noMedicineChartData () {
        return (this.chartData.chartData || {}).noMedicineChart || {}
      }
    },
    created() {
    },
    mounted() {
      this.ageLimitChart()
    },
    methods: {
      ageLimitChart () {
        const medicineChart = (this.chartData.chartData || {}).medicineChart
        const noMedicineChart = (this.chartData.chartData || {}).noMedicineChart
        if (!medicineChart && !noMedicineChart) {
          return false
        }
        const option = {
          title: {
            show: true,
            text: '盘盈设备价值分布',
            left: 'center',
            bottom: '3%',
            textStyle: {
              color: '#666',
              fontWeight: 400,
              fontSize: echartsConfig.titleFontSize || 14
            }
          },
          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color:'#989898'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            },
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '13%',
            containLabel: true
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#989898'
              }
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            }
          },
          series: [
            {
              name: '3的指数',
              type: 'bar',
              barWidth: '40%',
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#9EC3E8' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#4E8AC9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color:'#fff',
                    fontWeight: 'bolder',
                    fontSize: 14
                  }
                }
              },
              data:[]
            }
          ]
        };
        let medicineEchartOption = JSON.parse(JSON.stringify(option))
        medicineEchartOption.title.text = '盘亏设备数量TOP5品类'
        medicineEchartOption.xAxis.data = medicineChart.x_data
        medicineEchartOption.series[0].data = medicineChart.y_data
        this.medicineEchart = echarts.init(this.$refs.medicineChartDom)
        this.medicineEchart.setOption(medicineEchartOption)

        let noMedicineEchartOption = JSON.parse(JSON.stringify(option))
        noMedicineEchartOption.title.text = '盘亏设备数量TOP5品类'
        noMedicineEchartOption.xAxis.data = noMedicineChart.x_data
        noMedicineEchartOption.series[0].data = noMedicineChart.y_data
        this.medicineEchart = echarts.init(this.$refs.noMedicineChartDom)
        this.medicineEchart.setOption(noMedicineEchartOption)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .losses_medicine_device {
        .page-content {
            margin-top: 10px;
            .medicine-title {
                color: #0a122d;
                font-weight: 700;
                margin-top:35px;
                margin-bottom: 15px;
                font-size: 16px;
            }
            .page-chart {
                margin-bottom: 25px;
                position: relative;
                .chart-box {
                    width: 100%;
                    height: 100%;
                }
                .y-name {
                    position: absolute;
                    top: 35px;
                    right: 4%;
                    font-size: 12px;
                    color: #989898;
                }
            }
            .describe_box {
                .describe-text {
                    color: #666;
                    font-size: 18px;
                    line-height: 32px;
                    margin-bottom:10px;
                    text-align: center;
                }
            }
        }
    }
</style>
